<template>
  <div class="column-click-edit">
    <template v-if="!isEdit && !eternal">
      <slot>
        <span>{{ text }}</span>
      </slot>
      <template v-if="permission">
        <i v-permission="permission" class="el-icon-edit" @click.stop="onIconClick" />
      </template>
      <template v-else>
        <i class="el-icon-edit" @click.stop="onIconClick" />
      </template>
    </template>
    <template v-if="isEdit || eternal">
      <div @click.stop>
        <template v-if="dataType == 'text'">
          <el-input ref="input" v-model="editValue" @change="onChange" />
        </template>
        <template v-if="dataType == 'date'">
          <el-date-picker
            ref="datePicker"
            v-model="editValue"
            type="date"
            value-format="yyyy-MM-dd"
            :editable="false"
            :clearable="false"
            @change="onChange"
          />
        </template>
        <template v-if="dataType == 'number'">
          <el-input-number
            ref="input"
            v-model="editValue"
            :precision="precision"
            :disabled="max === min"
            :controls="controls"
            :max="max"
            :min="min"
            @change="onChange"
          />
        </template>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'ColumnClickEdit',
  inheritAttrs: false,
  props: {
    row: {
      type: Object,
      required: true
    },
    value: {
      default: ''
    },
    // 数据类型 text、date、number
    dataType: {
      type: String,
      default: 'text'
    },
    emptyText: {
      type: String,
      default: ''
    },
    max: {
      type: Number
    },
    min: {
      type: Number
    },
    eternal: {
      type: Boolean,
      default: false
    },
    controls: {
      type: Boolean,
      default: true
    },
    precision: {
      type: Number,
      default: 4
    },
    permission: {
      type: Array,
      default() {
        return null
      }
    }
  },
  data() {
    return {
      isEdit: false,
      editValue: null,
      clickEventListener: null
    }
  },
  computed: {
    text() {
      if (this.value || this.value === 0) {
        return this.value
      }
      return this.emptyText
    }
  },
  watch: {
    value() {
      this.editValue = this.value
    }
  },
  created() {
    this.clickEventListener = () => {
      this.cancelEdit()
    }
    document.addEventListener('click', this.clickEventListener)
  },
  mounted() {
    this.editValue = this.value
  },
  beforeDestroy() {
    document.removeEventListener('click', this.clickEventListener)
  },
  deactivated() {
    document.removeEventListener('click', this.clickEventListener)
  },
  methods: {
    onIconClick() {
      this.isEdit = true
      this.$nextTick(() => {
        if (this.$refs.datePicker) {
          this.$refs.datePicker.focus()
        }
        if (this.$refs.input) {
          this.$refs.input.focus()
        }
      })
    },
    cancelEdit() {
      if (this.isEdit) {
        this.isEdit = false
      }
    },
    onChange(val) {
      if (val !== this.value) {
        this.$emit('change', { row: this.row, value: val })
        this.cancelEdit()
      }
    }
  }
}
</script>

<style>
.column-click-edit .el-icon-edit {
  font-weight: bold;
  color: #1881dd;
  cursor: pointer;
}

.column-click-edit .el-input-number,
.column-click-edit .el-input {
  width: 100%;
}

.column-click-edit .el-date-editor.el-input,
.column-click-edit .el-date-editor.el-input__inner {
  width: 120px;
}

.column-click-edit .el-input--suffix .el-input__inner {
  padding-right: 10px;
}
</style>
